<template>
    <el-drawer v-model="drawerShow" :before-close="close" :with-header="false" size="40%">
      <span class="_before" v-if="returnInfo.returnBoxType == 5">还箱单详情</span>
      <span class="_before" v-if="returnInfo.returnBoxType == 10">箱属详情</span>
      <span class="_before" v-if="returnInfo.returnBoxType == 15">还箱令详情</span>
      <el-row class="marginTop10">
          <el-col :span="4" class="text-right">租箱企业：</el-col>
          <el-col :span="19">{{ returnInfo.agentName }}</el-col>
      </el-row>
      <el-row class="marginTop10">
          <el-col :span="4" class="text-right">还箱单号：</el-col>
          <el-col :span="19">{{ returnInfo.returnBoxNo }}</el-col>
      </el-row>
        <!-- <el-row class="marginTop10">
          <el-col :span="5" class="text-right">租箱订单：</el-col>
          <el-col :offset="5" :span="19">
            <el-table :data="rentOrderList">
              <el-table-column prop="orderNo" label="订单号" align="center"/>
              <el-table-column label="联系人" align="center">
                <span v-if="isAgent"> {{ returnInfo.boxEastUserName }}</span>
                <span v-else-if="!isAgent"> {{ returnInfo.agentUserName }}</span>
                </el-table-column>
              <el-table-column label="联系电话" align="center">
                  <span v-if="isAgent">+{{ returnInfo.boxEastUserAreaCode }} 
                  {{ returnInfo.boxEastUserTel }}</span>
                  <span v-if="!isAgent">+{{ returnInfo.agentUserAreaCode }} 
                  {{ returnInfo.agentUserTel }}</span>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row> -->
      <el-row class="marginTop10" v-if="returnInfo.instruction">
          <el-col :span="4" class="text-right">还箱指令号：</el-col>
          <el-col :span="19">{{ returnInfo.instruction }}</el-col>
      </el-row>
      <el-row class="marginTop10" v-if="returnInfo.returnValidityPeriodStart">
        <el-col :span="5" class="text-right">还箱单有效范围：</el-col>
        <el-col :span="19">{{ formatDate(returnInfo.returnValidityPeriodStart, 2) }}~{{ formatDate(returnInfo.returnValidityPeriodEnd, 2) }}
          <el-tooltip :content="content" effect="dark" placement="top">
              <el-icon class="el-icon--right">
                <QuestionFilled />
              </el-icon>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row class="marginTop10">
          <el-col :span="4" class="text-right">箱型量：</el-col>
          <el-col :span="19">{{boxVolumeSp(returnInfo)}}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="4" class="text-right">箱号：</el-col>
        <el-col :span="19">
          <el-row>
              <el-col :span="5" v-for="(item,index) in containerNoInfo" :key="index" class="text-center">
                  {{item.containerNo}}<template v-if="index < (containerNoInfo.length-1)">、</template>
              </el-col> 
          </el-row>
        </el-col>        
      </el-row>
      <el-row class="marginTop10"  v-if="returnInfo.returnBoxType == 10">
          <el-col :span="4" class="text-right">箱属内容：</el-col>
          <el-col :span="19">{{returnInfo.boxOwnerContent || '--'}}<el-icon  @click="copyText(returnInfo.boxOwnerContent)"><DocumentCopy style="color: #2158f3;"/></el-icon> </el-col>
      </el-row>
      <el-row class="marginTop10"  v-if="returnInfo.returnBoxType != 10">
          <el-col :span="4" class="text-right">箱令内容：</el-col>
          <el-col :span="19">{{returnInfo.boxOwnerContent || '--'}}<el-icon  @click="copyText(returnInfo.boxOwnerContent)"><DocumentCopy style="color: #2158f3;"/></el-icon></el-col>
      </el-row>
      <el-row class="marginTop10">
          <el-col :span="4" class="text-right">附件：</el-col>
          <el-col :span="19">
              <!-- <showFile :detailFileList="returnInfo.detailFileList"></showFile>   -->
              <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(returnInfo.detailFileList)|| []" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
          </el-col>
      </el-row>
      <yardInfoCard :yard="returnInfo"></yardInfoCard>
      
  </el-drawer>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils'
import { onActivated, ref,nextTick } from 'vue'
import yardInfoCard from '@/views/components/boxYard/yardInfo.vue'
import ImgUpload from '@/components/upload/uploadFiles-Images'
import { getReturnData } from '@/api/orderManage/returnBox'
import basicConfig from '@/constant/containerInfo'
import { ElMessage } from 'element-plus'
const props = defineProps({
  isAgent: {   //当前等角色  true 货代角色  false 集装箱公司角色
    type: Boolean,
    default: false   
  }
})

const openBox = (info) => {
  detaiInfo(info)
}
//查看还箱单详情
const drawerShow=ref(false)
const content=ref('从货代公司收到还箱单之日起，以天为单位计算有效期，不足一天按一天计算。')
const returnInfo = ref({})
const rentOrderList = ref([])
const containerNoInfo = ref([])
const detaiInfo = (row: any) => {
  getReturnData(row.id).then((res: any) => {
    drawerShow.value=true
    returnInfo.value = res.data
    rentOrderList.value = JSON.parse(res.data.orderList)
    containerNoInfo.value = JSON.parse(res.data.containerNoList) || []
  })
};
//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxVolumeSp = (row:any) => { 
    try{
        row = JSON.parse(row.containerCountList)
    }catch(err){
        row = []
    }
    let volumeStr = ''
    for (let i = 0; i < row.length; i++) {
        volumeStr += basicConfig.boxTypeInfo1[row[i].boxType] + '*' + row[i].boxQuantity + ((i < row.length - 1)? '、' : '')
    }
    return volumeStr || '--'
}
defineExpose({
    openBox
})

const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success('复制成功');
  } catch (err) {
    // ElMessage.error('复制失败'); // 使用 Element Plus 的错误提示
    fallbackCopyText(text)
  }
};
// 传统的复制方法（降级方案）
function fallbackCopyText(text) {
  try {
    // 创建一个临时的textarea元素来保存文本
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed'; // 避免滚动到底部
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.style.zIndex = '-999'; // 放在不可见区域

    document.body.appendChild(textArea);
    textArea.focus(); // 聚焦
    textArea.select(); // 选择文本

    const successful = document.execCommand('copy'); // 执行复制命令
    document.body.removeChild(textArea); // 移除临时元素

    if (successful) {
        ElMessage.success('复制成功');
    } else {
      ElMessage.warning('复制失败，请手动选择文本进行复制。');
    }
  } catch (err) {
    ElMessage.warning('复制失败，请手动选择文本进行复制。');
  }
}
</script>
<style lang="scss" scoped>
</style>
